<template>
  <div>
    <div>
      <!-- 搜索 -->
      <!-- 技术报告录入 - 故障现象选择 -->
      <TopFilter :list="topFilterInit" :cols="2" :collapse="collapse" labelWidth="100"
                 @filterChange="changeHandle"></TopFilter>
      <!-- table -->
      <FilterTable
        height="auto"
        selectionType="single"
        ref="table"
        :columns="columns"
        :params="fetchParams"
        :dataSource="dataList"
        :datakey="'records'"
        :isPagination=true
        :fetchapi="fetchApi"
        :onColumnsChange="columns => (this.columns = columns)"
        :onRowSelectChange="selectChange">
      </FilterTable>
      <div style="margin-bottom: 3rem;"></div>
    </div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <AjaxButton type="primary" :click="saveDialog.bind()" :disabled="disableds">添 加</AjaxButton>
      <multiuse-button @click="closeDialog">关 闭</multiuse-button>
    </div>
  </div>
</template>
<script>
import { getFailurePhenomenonListByPage } from '@/api/dictionary/index';

export default {
  // mixins: [dictionary],
  data() {
    return {
      disableds: true,
      loading: false,
      dataList: [],
      visible: false,
      visibleDrawer: false,
      collapse: true,
      infoId: null,
      topFilterInit: this.topFilterInitFun(),
      flterValue: {}, //参数
      columns: this.creatHeader(),
      fetchApi: getFailurePhenomenonListByPage,
      fetchParams: { faStatus: 1 }, //ipa 接口
      selectedRows: [] //选中经销商
    };
  },
  created() {
  },
  methods: {
    //搜索数据
    topFilterInitFun() {
      return [
        { type: 'INPUT', label: '一级故障', fieldName: 'sysCode1', placeholder: '请输入一级代码...', initialValue: ''},
        { type: 'INPUT', label: '一级名称', fieldName: 'sysName1', placeholder: '请输入一级名称...', initialValue: ''},
        { type: 'INPUT', label: '二级故障', fieldName: 'sysCode2', placeholder: '请输入二级代码...', initialValue: ''},
        { type: 'INPUT', label: '二级名称', fieldName: 'sysName2', placeholder: '请输入二级名称...', initialValue: ''},
        { type: 'INPUT', label: '三级故障', fieldName: 'sysCode3', placeholder: '请输入三级代码...', initialValue: ''},
        { type: 'INPUT', label: '三级名称', fieldName: 'sysName3', placeholder: '请输入三级名称...', initialValue: ''},
        { type: 'INPUT', label: '故障代码', fieldName: 'sysCode4', placeholder: '请输入故障代码...', initialValue: ''},
        { type: 'INPUT', label: '故障名称', fieldName: 'sysName4', placeholder: '请输入故障名称...', initialValue: ''},
      ];
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({},val,{
        faStatus: 1
      });
      console.log(val);
    },
    //table表头和数据源
    creatHeader() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {title: '一级故障', dataIndex: 'sysCode1', sorter: true},
        {title: '一级名称', dataIndex: 'sysName1', sorter: true},
        {title: '二级故障', dataIndex: 'sysCode2', sorter: true},
        {title: '二级名称', dataIndex: 'sysName2', sorter: true},
        {title: '三级故障', dataIndex: 'sysCode3', sorter: true},
        {title: '三级名称', dataIndex: 'sysName3', sorter: true},
        {title: '故障代码', dataIndex: 'sysCode4', sorter: true},
        {title: '故障名称', dataIndex: 'sysName4', sorter: true},
        {title: '故障现象代码', dataIndex: 'faultCode', sorter: true},
        {title: '故障现象名称', dataIndex: 'faultName', sorter: true, width: 300}
        ];
    },
    //选中
    selectChange(rows) {
      this.selectedRows = rows;
      this.disableds = this.selectedRows.length <= 0;
      console.log(this.selectedRows);
    },
    //保存
    saveDialog() {
      if (this.selectedRows.length > 0) {
        this.loading = true;
        for(let i = 0 ; i < this.selectedRows.length; i++){
          this.selectedRows[i].faId = this.selectedRows[i].faultId;
        }
        this.$emit('save', this.selectedRows);
      }

    },
    //取消操作
    closeDialog() {
      this.$emit('close', { visible: false, data: this.selectedRows, type: 'close' });
    },
    chooseOrderNo() {
      this.visible = true;
    }
  }
};
</script>

<style lang="less" scoped></style>
